<template>
    <div class="employeeList">
        <!-- 顶部 -->
        <div class="topHeader">
            <div class="logo_language">
                <img class="logo" src="../assets/images/logo.png" alt="" />
                <div class="language" @click="setLang">
                    <img class="language_logo" src="../assets/images/zn.png" alt="" />
                    <span>{{ $t("language.name") }}</span>
                </div>
            </div>
            <div class="search">
                <van-search v-model="search" left-icon="" :clearable="false" :placeholder="$t('common.txt36')" @keyup.enter="setSearch">
                    <template #right-icon>
                        <img class="search_icon" src="../assets/images/search.png" alt="" @click="setSearch" />
                    </template>
                </van-search>
            </div>
        </div>
        <!-- 列表区域 -->
        <div class="list">
            <van-list v-model="loading" :loading-text="$t('common.txt55')" :finished="finished" :finished-text="$t('common.txt53')" @load="getList">
                <div class="list_item" v-for="(item, index) in list" :key="index" @click="setSelect(index)">
                    <div class="item_top">
                        <div class="item_top_left">
                            <div v-if="activeManagement">
                                <div class="yuan" v-if="!item.select"></div>
                                <img src="../assets/images/gouxuan.png" alt="" v-else />
                            </div>
                            <div class="title">{{ item.chinese_name }} {{ item.english_name }}</div>
                        </div>
                        <div class="item_top_right" @click.stop="goEdit(item)">
                            <img src="../assets/images/bianji.png" alt="" />
                            {{ $t("common.txt38") }}
                        </div>
                    </div>
                    <div class="item_bottom_row">
                        <span>{{ $t("common.txt39") }}</span>
                        {{ item.user_account_id }}
                    </div>
                    <div v-for="(Hitem, Hindex) in item.hotels" :key="Hindex">
                        <div class="item_bottom_row">
                            <span>{{ $t("common.txt40") }}</span>
                            {{ Hitem.father }}
                        </div>
                        <div class="item_bottom_row">
                            <span>{{ $t("common.txt41") }}</span>
                            {{ Hitem.self }}
                        </div>
                    </div>

                    <div class="item_bottom_row">
                        <span>{{ $t("common.txt42") }}</span>
                        {{ item.eu_job }}
                    </div>
                    <div class="item_bottom_row">
                        <span>{{ $t("common.txt43") }}</span
                        >{{ item.email }}
                    </div>
                </div>
            </van-list>
        </div>
        <!-- 底部区域 -->
        <div class="bottomFooter">
            <div class="bottomFooter_btn btn_one" v-if="!activeManagement" @click="handleExportAll">
                {{ $t("common.txt58") }}
            </div>
            <div class="bottomFooter_btn btn_tow" v-if="!activeManagement" @click="activeManagement = !activeManagement">
                {{ $t("common.txt59") }}
            </div>
            <div class="allSelect" v-if="activeManagement" @click="setAll">
                <div class="yuan" v-if="!isAll"></div>
                <img src="../assets/images/gouxuan.png" alt="" v-else />
                {{ $t("common.txt44") }}
            </div>
            <div class="btn_three" v-if="activeManagement">
                <div class="btn_three_l" @click="handleDisable">{{ $t("common.txt45") }}</div>
                <div class="btn_three_r" @click="handleExport">{{ $t("common.txt46") }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast, Dialog } from "vant";
export default {
    name: "report",
    data() {
        return {
            search: "", //搜索内容
            list: [], //员工数据
            loading: true, //列表加载
            finished: false, //是否加载完成
            page: 0, //当前页码
            isAll: false, //是否全选
            key: "",
            type: "",
            total: 0,
            activeManagement: false, //选中管理 true 未点击管理 false
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        setLang() {
            if (this.$t("language.name") == "English") {
                this.$i18n.locale = "en";
            } else {
                this.$i18n.locale = "zh";
            }
        },
        setSelect(index) {
            this.$set(this.list[index], "select", this.list[index].select ? false : true);
            this.$forceUpdate();
            this.isAll = this.list.every((item) => item.select);
        },
        handleExport() {
            if (window.innerWidth > 768) {
                let user_id = [];
                this.list.forEach((item) => {
                    if (item.select) {
                        user_id.push(item.id);
                    }
                });
                if (!user_id.length) return;
                user_id = user_id.join(",");
                const a = document.createElement("a");
                a.href = "https://wechat.accortech.cn/api/member_edit/export&user_ids=" + user_id;
                a.click();
            } else {
                Dialog.alert({
                    title: this.$t("common.txt33"),
                    message: this.$t("common.txt47"),
                    confirmButtonText: this.$t("common.txt34"),
                    confirmButtonColor: "#000",
                }).then(() => {
                    // on close
                });
            }
        },
        //一键导出全员
        handleExportAll() {
            if (window.innerWidth > 768) {
                this.$api.getInfo().then((res) => {
                    if (res.code == 1) {
                        const a = document.createElement("a");
                        a.href = "https://wechat.accortech.cn/api/member_edit/export_all&userid=" + res.data;
                        a.click();
                    }
                });
            } else {
                Dialog.alert({
                    title: this.$t("common.txt33"),
                    message: this.$t("common.txt47"),
                    confirmButtonText: this.$t("common.txt34"),
                    confirmButtonColor: "#000",
                }).then(() => {
                    // on close
                });
            }
        },
        handleDisable() {
            try {
                this.list.forEach((item) => {
                    if (item.select && item.is_disable == 1) {
                        Toast(this.$t("common.txt56"));
                        throw new Error("存在已禁用用户");
                    }
                });
                Dialog.confirm({
                    title: this.$t("common.txt33"),
                    messageAlign: "left",
                    message: `${this.$t("common.txt48")}\n${this.$t("common.txt49")}\n${this.$t("common.txt50")}`,
                    confirmButtonText: this.$t("common.txt51"),
                    confirmButtonColor: "#000",
                })
                    .then(() => {
                        let user_id = [];
                        this.list.forEach((item) => {
                            if (item.select) {
                                user_id.push(item.id);
                            }
                        });
                        user_id = user_id.join(",");
                        Toast.loading({
                            forbidClick: true,
                            duration: 0,
                        });
                        this.$api
                            .user_band({
                                user_id,
                            })
                            .then((res) => {
                                Toast.clear();
                                if (res.code == 1) {
                                    Toast(this.$t("common.txt52"));
                                    this.setSearch();
                                } else {
                                    Toast(res.msg);
                                }
                            });
                        // on close
                    })
                    .catch(() => {
                        // on cancel
                    });
            } catch (e) {}
        },
        setAll() {
            this.isAll = !this.isAll;
            this.list.forEach((item) => {
                item.select = this.isAll;
            });
        },
        goEdit(info) {
            this.$router.push({
                path: "/employeeDetail",
                query: {
                    info: encodeURIComponent(JSON.stringify(info)),
                },
            });
        },
        //搜索
        setSearch() {
            this.page = 0;
            this.list = [];
            this.key = this.search;
            this.getList();
        },
        //获取数据
        getList() {
            Toast.loading({
                forbidClick: true,
                duration: 0,
            });
            this.page++;
            this.$api
                .getList({
                    key: this.key,
                    page: this.page,
                })
                .then((res) => {
                    Toast.clear();
                    if (res.code == 1) {
                        // this.type = res.data.type;
                        this.list.push(res.data.lists);
                        // this.total = res.data.lists.total;
                        // if (res.data.lists.data.length < 10) {
                        //     this.finished = true;
                        // }

                        // 添加select字段
                        this.list.forEach((item) => {
                            item.select = false;
                        });

                        this.loading = false;
                        this.finished = true;
                    }
                });
        },
        goDetail(code, type) {
            this.$router.push({
                path: "/reportDesc",
                query: {
                    code,
                    type,
                },
            });
        },
    },
    // watch: {
    //   $route: {
    //     handler: function () {
    //       this.type = "";
    //       this.region = "";
    //       this.province = "";
    //       this.city = "";
    //       this.getList();
    //     },
    //     immediate: true,
    //   },
    // },
    filters: {
        percentage(num) {
            if (!(num * 1)) {
                return "0%";
            }
            let data = Math.floor(num * 100);
            return data + "%";
        },
    },
};
</script>
<style>
.van-field__control {
    color: #fff !important;
}
</style>
<style lang="scss" scoped>
.employeeList {
    min-height: 100vh;
    background-color: #f5f5fa;
    position: relative;
    .topHeader {
        width: 100%;
        height: 4rem;
        background: #060143;
        padding: 0.3867rem 0.4rem 0 0.4rem;

        .logo_language {
            width: 100%;
            height: 0.7333rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.3467rem;
            color: #fff;
            font-weight: 500;
            font-family: Source Han Sans CN;
            .logo {
                width: 0.9067rem;
                height: 100%;
            }

            .language {
                display: flex;
                align-items: center;
                .language_logo {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.1333rem;
                }
            }
        }
        .search {
            width: 100%;
            height: 1.1467rem;
            margin-top: 0.2933rem;
            border: 2px solid #b78d5b;
            border-radius: 0.2133rem;
            background: #1a1552;
            .search_icon {
                width: 0.4133rem;
                height: 0.4133rem;
            }
            .van-search {
                background: none;
                padding: 0;
            }
            .van-search__content {
                background: none;
            }
            .van-search .van-cell {
                padding: 0.2667rem 0.4rem 0.2667rem 0;
            }
            .van-cell {
                line-height: 0;
            }
        }
    }

    .list {
        position: absolute;
        padding: 0 0.4rem;
        left: 0;
        top: 3.2267rem;
        width: 100%;
        height: calc(100vh - 3.2267rem - 2.2667rem);
        overflow: auto;
        .list_item {
            width: 100%;
            // height: 5.8133rem;
            background: #fff;
            border-radius: 0.2133rem;
            margin-bottom: 0.4rem;
            padding: 0 0.4rem 0.4rem 0.4rem;

            .item_top {
                width: 100%;
                height: 1.36rem;
                border-bottom: 1px solid #dcdfe6;
                display: flex;
                align-items: center;

                .item_top_left {
                    flex: 1;
                    display: flex;
                    align-items: center;

                    .yuan {
                        width: 0.48rem;
                        height: 0.48rem;
                        border-radius: 50%;
                        border: 1px solid #e6e6e6;
                        margin-right: 0.1333rem;
                    }
                    img {
                        width: 0.48rem;
                        height: 0.48rem;
                        margin-right: 0.1333rem;
                    }
                    .title {
                        color: #060143;
                        font-family: Source Han Sans CN;
                        font-weight: bold;
                        font-size: 0.4267rem;
                    }
                }
                .item_top_right {
                    width: 1.6rem;
                    color: #bd9664;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 0.3467rem;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    img {
                        width: 0.4rem;
                        height: 0.4rem;
                        margin-right: 0.1333rem;
                    }
                }
            }
            .item_bottom_row {
                width: 100%;
                display: flex;
                flex-wrap: nowrap;
                margin: 0.4rem 0;
                color: #060143;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 0.3733rem;
                line-height: 0.45rem;

                span {
                    color: #706f80;
                    display: inline-block;
                    min-width: 60px;
                }
            }
        }
    }

    .bottomFooter {
        width: 10rem;
        height: 2.2667rem;
        background: #fff;
        position: fixed;
        bottom: 0;
        display: flex;
        padding: 0.2667rem 0.4rem 0 0.4rem;
        justify-content: space-between;

        .bottomFooter_btn {
            width: 4.4rem;
            height: 1.1733rem;
            border-radius: 0.2133rem;
            text-align: center;
            line-height: 1.1733rem;
            font-weight: 500;
            font-size: 0.4267rem;
            font-family: Source Han Sans CN;
            color: #fff;
        }

        .btn_one {
            background-color: #060143;
        }
        .btn_tow {
            background: linear-gradient(90deg, #f7c88f, #b78d5b);
        }

        .allSelect {
            display: flex;
            align-items: center;
            font-size: 0.3733rem;
            height: 1.1733rem;
            color: #060143;
            font-family: Source Han Sans CN;
            .yuan {
                width: 0.48rem;
                height: 0.48rem;
                border-radius: 50%;
                border: 1px solid #e6e6e6;
                margin-right: 0.1333rem;
            }
            img {
                width: 0.48rem;
                height: 0.48rem;
                margin-right: 0.1333rem;
            }
        }

        .btn_three {
            width: 5.0667rem;
            height: 1.1733rem;
            border-radius: 0.5867rem;
            display: flex;
            font-weight: 500;
            font-size: 0.4267rem;
            font-family: Source Han Sans CN;
            color: #fff;
            .btn_three_l {
                width: 50%;
                height: 100%;
                background: #ff5f40;
                border-radius: 0.5867rem 0px 0px 0.5867rem;
                text-align: center;
                line-height: 1.1733rem;
            }
            .btn_three_r {
                width: 50%;
                height: 100%;
                background: linear-gradient(90deg, #f7c88f, #b78d5b);
                border-radius: 0 0.5867rem 0.5867rem 0;
                text-align: center;
                line-height: 1.1733rem;
            }
        }
    }
}
</style>
